<!--
*@Author: QWP
*@Description: 审核退回界面
*@Date: 2024-08-12 20:16:18
-->
<template>
  <div class="u-custom-height">
    <u-loading-box :loading="loading"
      class="f-w-100 f-h-100">
      <Form :model="form"
        ref="formRef">
        <FormItem label="&nbsp;&nbsp;&nbsp;退回节点">
          <Select v-model:value="form.returnTo_act_id" :options="dctData"
            :fieldNames="{ label: 'userTaskName', value: 'userTaskId' }"></Select>
        </FormItem>
        <FormItem label="退回意见" name="return_msg"
          :rules="{ required: true, message: '退回意见不能为空!' }">
          <Textarea v-model:value="form.return_msg"></Textarea>
        </FormItem>
      </Form>
    </u-loading-box>
  </div>
  <Row justify="end">
    <Space>
      <Button itype="close" :danger="true" :ghost="true" 
        @click="submitBack">
        <template #icon>
          <UIconFont type="icon-a-tuihui1"></UIconFont>
        </template>
        退回
      </Button>
      <Button :danger="true" :ghost="true"  
        @click="close">
        关闭
      </Button>
    </Space>
  </Row>
</template>
<script lang="ts" setup>
defineOptions({
  name: 'u-audit-back'
})
import { ref, reactive, computed, onMounted, h, useAttrs, watch, nextTick } from 'vue' 
import { alertC, confirmC, isValue, nullC, numberC } from '@/util/common'
import * as auditApi from '@/service/audit'
import UForm from '@/components/common/form/Form.vue'
import 'ant-design-vue/dist/reset.css';
import { Form, FormItem, Select, Textarea, Button, Space, Row } from 'ant-design-vue'
import UIconFont from '@/components/common/iconfont/IconFont.vue'

const props = defineProps<{
  params?: object,
  returnMsg: ''
}>()

const attrs = useAttrs()
const emits = defineEmits(['submit', 'close'])

const dctData = ref<any>([])

const loading = ref<boolean>(false)
const formRef = ref()
const form = ref({
  returnTo_act_id: '',
  return_msg: props.returnMsg,
})
const elements = reactive([
  { label: '退回节点', key: 'returnTo_act_id', element: 'select', labelCol: { span: 6},
    wrapperCol: { span: 18},
    formItemProps: { labelWidth: '80px',  required: true },
    componentProps: { showCount: true, maxlength: 200  },
  },
  { label: '退回意见', key: 'return_msg',  element: 'textarea', 
    formItemProps: { labelWidth: '80px', required: true },
    componentProps: { showCount: true, maxlength: 200  },
  },
])

onMounted(() => {
  nextTick(() => getActPoint())
})

// 获取审核节点
const getActPoint = async () => {
  loading.value = true;
  try {
    const res = await auditApi.getAct(props.params)
    if(res.error == 200) {
      dctData.value = res.result || []
    }
  } catch (error) {}
  loading.value = false;
}

// 退回提交
const submitBack = async () => {
  const result = await formRef.value.validate()
  emits('submit', form.value)
}

// 关闭
const close = () => {
  // 延迟一段时间进行关闭
  setTimeout(() => {
    emits('close')
  }, parseInt(0.5 * 100))
}

</script>
<style lang='scss'>
@import url('ant-design-vue/dist/reset.css');
.u-custom-height{
  width: 100%;
  height: 100%;
  min-height: 250px;
  height: auto;
  padding-top: 16px 
}
</style>